<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>清除内外边距</title>
		<style type="text/css">
			/*
			清除 系统元素 默认的内外边距
			行内元素只有左右边距 ,没有上下边距,必须注意,
			尽量 行内元素 只给左右边距
			边距合并的问题:
			如果div1 和div2 上下垂直并列
			div1 margin-bottom: 20px
			div2 margin-top: 10px 
			那么外边距会合并为20px , 距离以最大的为准
			父子边距合并问题:
			子盒子 margin-top 的时候,父盒子也会下来,单子盒子对于父盒子的
			外边距不变,
			
			解决方案:
			1: 为父元素 定义1px 的边框或者上内边距
			2: 为父布局添加 : overflow:hidden
			*/
			*{
				padding: 0px;
				margin: 0px;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
			}
			div div{
				width: 50px;
				height: 50px;
				background-color: #FF0000;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		
		<p>123</p>
		<p>456</p>
		<ul>
			<li>hha</li>
			<li>1243</li>
			<li>4355</li>
		</ul>
		
		<div>
			<div></div>
		</div>
		
	</body>
</html>
